<template>
	<view class="video-page">
		<view class="video-head">
			<view class="video-nav">
				<view class="nav-item" v-for="item in navData" :key="item.id" @click="changeNav(item.id)"
					:class="{active:item.id == navActive}">
					{{item.title}}
				</view>
			</view>
		</view>
		<view class="video-content">
			<view class="vedio-list">
				<VideoCard v-for="v in videoList" :key="v.id" :videoItem="v" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue'
	import {
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		getVedioNavList
	} from '../../api/index.js'
	// 视频数据
	const videoList = ref([])
	const navData = ref([{
			id: 0,
			title: '推荐'
		},
		{
			id: 1331498,
			title: '热片解读'
		},
		{
			id: 1067226,
			title: '新片预告'
		},
		{
			id: 1074953,
			title: '速看电影'
		},
		{
			id: 1307354,
			title: '剧集综艺'
		},
	])

	// 改变导航数据
	const page = ref(0)
	const navActive = ref(0)
	const changeNav = (id) => {
		page.value = 0
		console.log(navActive.value, id)
		navActive.value = id
	}
	const getVideoData = async () => {
		let {
			data
		} = await getVedioNavList(page.value, navActive.value)

		console.log("data.data.feeds", data.data.feeds);
		videoList.value = data.data.feeds

	}

	onMounted(async () => {
		await getVideoData()
	})

	watch(
		navActive,
		async (n, o) => {
			if (n != o) {
				await getVideoData()
			}
		}
	)

	onReachBottom(async () => {
		page.value++;
		console.log(page.value);
		let {
			data
		} = await getVedioNavList(page.value, navActive.value)
		if (!data.data.feeds.length) {
			return
		}
		videoList.value = [...videoList.value, ...data.data.feeds]
		console.log(videoList.value, 'page+++');
	});
</script>

<style lang="scss" scoped>
	.video-page {
		width: 100%;

		.video-head {
			width: 100%;
			height: 90rpx;
			position: fixed;
			top: 88rpx;
			left: 0;
			z-index: 12;
			background-color: #fff;
			line-height: 90rpx;

			.video-nav {
				display: flex;
				justify-content: space-around;

			}

			.nav-item {
				position: relative;

				&.active::after {
					position: absolute;
					bottom: 6rpx;
					left: 0;
					right: 0;
					margin: 0 auto;
					content: '';
					width: 38rpx;
					height: 6rpx;
					background-color: red;
				}
			}
		}

		.video-content {
			width: 100%;
			margin-top: 100rpx;
			background-color: #f5f5f5;
		}
	}
</style>